$(document)
    .ready(
        function () {
            var options = {
                title: "查询表单",// 表单标题
                numCount: 2,// 每行多少个控件
                columnNum: 6,
                width: "",// 表格宽度
                height: 100,// 一行的高度
                lwidth: 60,// label的默认宽度
                cwidth: 200,// 输入框的默认宽度
                lalign: "right",// label的默认水平位置(居左，居右，居中)
                lvalign: "top",// label的默认垂直位置(居上，居下，居中)
                calign: "right",// 输入框的默认水平位置(居左，居右，居中)
                cvalign: "top",// 输入框的默认垂直位置(居上，居下，居中)
                columns: [
                    {
                        classId: "tt",
                        name: "name",// 输入框id/name
                        label: "名称",// label名称
                        type: "textarea",// 输入框类型(text,textarea,radio,dropdown,date)
                        value: "测试名称",// 默认值
                        colspan: 1,// 输入框占据的空间
                        height: 20,// 高度
                        cwidth: 200,// 输入框的宽度
                        lwidth: 50,// label的宽度
                        lalign: "center",// label的水平位置
                        lvalign: "top",// label的垂直位置
                        calgin: "center",// 输入框的水平位置
                        cvalign: "top",// 输入框的垂直位置
                        rows: "3",// 当type为textarea时，行数
                        /** 以下为dropdown类型的独有配置* */
                        dropdown: {
                            data: [["label1", "value1"],
                                ["label2", "value2"],
                                ["label3", "value3"]],
                            /** 以下为启用ajax方式独有* */
                            type: "ajax",
                            minLength: 2,
                            dataType: "json",
                            url: "test-dropdown.do",// 查询地址
                            keyWordName: "keyWord",// 查询参数(后台接收参数名)
                            method: "post",// 提交方式
                            success: function (data) {
                                var ajaxData = new Array();
                                $
                                    .each(
                                        data.dropdown,
                                        function (i, n) {
                                            ajaxData.push([
                                                i, n]);
                                        });
                                return ajaxData;
                            }// ajax成功的回调函数，在方法体内需要将返回的数据组装成[[选项1名称，选项1值],[选项2名称，选项2值]....]这样的形式
                        },
                        dropdownValue: "测试下拉框",// 下拉输入框显示值
                        /** 以下属性为date类型的输入框特有属性 */
                        format: "yy-mm-dd"	//日期格式，此处为js的日期格式，非java的日期格式  特别注意

                    },
                    {
                        name: "date",
                        label: "时间",
                        type: "date",
                        value: "2012-05-10",
                        format: "yy-mm-dd"
                    },
                    {
                        name: "name1",
                        label: "名称1",
                        value: "下拉框实际值",
                        type: "dropdown",
                        lwidth: 60,
                        dropdown: {
                            data: [["label1", "value1"],
                                ["label2", "value2"],
                                ["label3", "value3"]],
                            //type : "ajax",
                            url: "test-dropdown.do",
                            dataType: "json",
                            keyWordName: "k",
                            method: "post",
                            minLength: 2,
                            success: function (data) {
                                var ajaxData = new Array();
                                $
                                    .each(
                                        data.dropdown,
                                        function (i, n) {
                                            ajaxData.push([
                                                i, n]);
                                        });
                                return ajaxData;
                            }
                        },
                        dropdownValue: "测试下拉框"
                    }, {
                        name: "zip1",
                        label: "邮编1",
                        type: "input"
                    }]
            };
            var formId = "form";
            $.each(options.columns, function (i, n) {
                if (i == 0) {
                    setTable("form");
                }
                if (i % options.numCount == 0) {
                    $("#" + formId + " table").append("<tr></tr>");
                }
                setLabel($("#" + formId + " table tr:last"), n);
                setControl($("#" + formId + " table tr:last"), n);
            });
            function setTable(formId) {
                $("<fieldset>").appendTo("#" + formId);
                if (options.title) {
                    $("<legend>").appendTo("#" + formId + " fieldset");
                    $("#" + formId + " fieldset legend").html(
                        options.title);
                }
                $("<table border='1'>", {
                    width: options.width
                }).appendTo("#" + formId + " fieldset");
            }

            function setLabel(trObj, n) {
                $("<td>", {
                    width: nvl(n.lwidth, options.lwidth),
                    align: nvl(n.lalign, options.lalign),
                    valign: nvl(n.lvalign, options.lvalign),
                    height: nvl(n.height, options.height)
                }).appendTo(trObj);
                var tdObj = trObj.children().last();
                $("<label>" + n.label + "：</label>").appendTo(tdObj);
            }

            function setControl(trObj, n) {
                $("<td>", {
                    width: nvl(n.cwidth, options.cwidth),
                    align: nvl(n.calign, options.calign),
                    valign: nvl(n.cvalign, options.cvalign),
                    height: nvl(n.height, options.height)
                }).appendTo(trObj);
                var tdObj = trObj.children().last();
                if (n.colspan) {
                    tdObj.attr("colspan", n.colspan);
                }
                /** 生成输入框控件* */
                var controlObj;
                if (n.type == "textarea") {
                    controlObj = $("<textarea>", {
                        id: "control_" + n.name,
                        name: n.name,
                        value: n.value,
                        rows: nvl(n.rows, 3),
                        width: nvl(n.cwidth, options.cwidth)
                    });
                } else if (n.type == "dropdown") {
                    controlValueObj = $("<input>", {
                        id: "control_" + n.name + "_value",
                        name: n.name,
                        value: n.value,
                        type: "text"
                    });
                    controlValueObj.attr("type", "hidden");
                    controlValueObj.appendTo(tdObj);
                    controlObj = $("<input>", {
                        id: "control_" + n.name + "_dropdown",
                        name: "control_" + n.name + "_dropdown",
                        value: n.dropdownValue,
                        type: "text",
                        width: "100%"
                    });
                    if (n.dropdown.type == "ajax") {
                        controlObj
                            .autocomplete(
                                {
                                    minLength: n.dropdown.minLength,
                                    source: function (request,
                                                      response) {
                                        var parameter = (new Function(
                                            "return {\""
                                            + n.dropdown.keyWordName
                                            + "\":\""
                                            + request.term
                                            + "\"}"))
                                        ();
                                        $
                                            .ajax(
                                                n.dropdown.url,
                                                {
                                                    data: parameter,
                                                    dataType: n.dropdown.dataType,
                                                    type: n.dropdown.method,
                                                    success: function (data) {
                                                        var t = n.dropdown.success
                                                            .call(
                                                                n.dropdown,
                                                                data);
                                                        response(t);
                                                    }
                                                });
                                    },
                                    focus: function (event, ui) {
                                        $(
                                            "#control_"
                                            + n.name
                                            + "_dropdown")
                                            .val(ui.item[0]);
                                        return false;
                                    },
                                    select: function (event, ui) {
                                        $(
                                            "#control_"
                                            + n.name
                                            + "_dropdown")
                                            .val(ui.item[0]);
                                        $(
                                            "#control_"
                                            + n.name
                                            + "_value")
                                            .val(ui.item[1]);
                                        return false;
                                    }
                                }).data("autocomplete")._renderItem = function (ul, item) {
                            return $("<li>").data("item.autocomplete",
                                item).append(
                                "<a>" + item[0] + "</a>").appendTo(
                                ul);
                        };
                    } else {
                        controlObj.autocomplete(
                            {
                                minLength: 0,
                                source: n.dropdown.data,
                                focus: function (event, ui) {
                                    $(
                                        "#control_" + n.name
                                        + "_dropdown")
                                        .val(ui.item[0]);
                                    return false;
                                },
                                select: function (event, ui) {
                                    $(
                                        "#control_" + n.name
                                        + "_dropdown")
                                        .val(ui.item[0]);
                                    $(
                                        "#control_" + n.name
                                        + "_value")
                                        .val(ui.item[1]);
                                    return false;
                                }
                            }).data("autocomplete")._renderItem = function (ul, item) {
                            return $("<li>").data("item.autocomplete",
                                item).append(
                                "<a>" + item[0] + "</a>").appendTo(
                                ul);
                        };
                        controlObj.on("click", function () {
                            $(this).autocomplete("search", "");
                        });
                    }
                    controlObj.on("change",
                        function () {
                            if ($(
                                    "#control_" + n.name
                                    + "_dropdown").val()) {
                            } else {
                                $("#control_" + n.name + "_value")
                                    .val("");
                            }
                        });
                } else if (n.type == "date") {
                    controlObj = $("<input>", {
                        id: "control_" + n.name,
                        name: n.name,
                        value: n.value,
                        type: "text",
                        width: "100%"
                    });
                    var datepicker_opt = {
                        dateFormat: nvl(n.format, "yy-mm-dd"),
                        showAnim: "slideDown"
                    };
                    controlObj.datepicker(datepicker_opt);
                } else {
                    controlObj = $("<input>", {
                        id: "control_" + n.name,
                        name: n.name,
                        value: n.value,
                        type: "text",
                        width: "100%"
                    });
                }
                controlObj.addClass(n.classId).appendTo(tdObj);
            }

            function nvl(str1, str2) {
                if (str1) {
                    return str1;
                } else {
                    return str2;
                }
            }
        });